<template>
  <div class="download box bg clmstart">
    <div class="btn_goback" @click="goBack">
      <span>返 回</span>
    </div>
    <!-- 文件列表 -->
    <div class="download_container">
      <div class="listbox">
        <div class="list_item" v-for="item in fileList" :key="item.id">
          <div class="item_left">
            <img :src="item.poster_url" />
          </div>
          <div class="item_right">
            <div class="filetitle">
              <div class="line"></div>
              <p class="file_title">{{ item.title }}</p>
            </div>
            <div class="filebtn">
              <span @click="toDetail(item.tag, item.link_url, 'cn')"
                >查看详情 &gt;</span
              >
              <img
                src="@/assets/img/icon_download.png"
                class="icon_download"
                v-show="item.tag === '3'"
                @click="downloadFile(item.link_url)"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      id: "",
      fileList: [],
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getAllFiles();
  },
  methods: {
    // 获取所有文件数据
    async getAllFiles() {
      Toast.loading({
        message: "loading...",
        forbidClick: true,
        duration: 0,
        overlay: true,
      });
      // 获取文件列表
      let timestamp = parseInt(new Date().getTime() / 1000);
      let mdtxt = this.$md5(
        `ehaj8eynamzi0o1y2namnz_${timestamp}`
      ).toLowerCase();
      let res = await this.$http
        .post("/getAllFiles", {
          timestamp,
          sign: mdtxt.substring(5, 15),
        })
        .catch((error) => {
          Toast.clear();
          Toast(error.message);
        });
      Toast.clear();
      if (res.data.code == 200) {
        let lists = res.data.data.lists;
        // 处理文件列表
        this.fileList = [];
        lists.forEach((item) => {
          if (item.files.length > 0) {
            item.files.forEach((file) => {
              this.fileList.push(file);
            });
          }
        });
        // console.log(this.fileList);
      } else {
        Toast(res.data.msg);
      }
    },
    // 查看详情
    toDetail(tag, url, lang) {
      // 1:公众号推文 2:长图 3:PDF
      if (tag == "1") {
        window.open(url);
      } else if (tag == "2") {
        this.$router.replace({
          path: "/img",
          query: { url, id: this.id, lang },
        });
      } else if (tag == "3") {
        this.$router.replace({
          path: "/pdf",
          query: { url, id: this.id, lang },
        });
      }
    },
    // 下载
    downloadFile(fileurl) {
      window.open(
        "https://www.mahelei.com/2023/MerckDownload/index.html?url=" + fileurl
      );
    },
    // 返回
    goBack() {
      // 隐藏场景控制
      this.$store.commit("updateCnScenceCtrlShow", false);
      this.$router.replace(`/cn/lab/${this.id}`);
    },
  },
};
</script>
<style lang="less" scoped>
.download {
  overflow-y: scroll;
  font-size: 1.7rem;
  .btn_goback {
    display: table;
    background: #22a0d4;
    color: #fff;
    border-radius: 2rem;
    padding: 0.3rem 2rem;
    align-self: flex-start;
    margin: 4rem 0 2rem 2.5rem;
    padding: 0.3rem 3rem;
  }
  .download_container {
    width: 100%;
    .listbox {
      padding: 0 2.5rem;
      .list_item {
        position: relative;
        width: 671px;
        height: 186px;
        overflow: hidden;
        border-radius: 1rem;
        background-image: linear-gradient(30deg, #bdc4f1, #bbddf1);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 1.5rem;
        .item_left {
          width: 338px;
          height: 144px;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .item_right {
          width: 278px;
          height: 144px;
          padding-left: 1rem;
          display: flex;
          flex-flow: column nowrap;
          justify-content: space-between;
          align-items: flex-start;
          .filetitle {
            width: 100%;
            .line {
              width: 19px;
              height: 4px;
              background-color: #22a0d4;
            }
            .file_title {
              font-size: 1.4rem;
              font-weight: bold;
            }
          }
          .filebtn {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            span {
              font-size: 1.3rem;
              color: #22a0d4;
            }
            img {
              width: 22px;
            }
          }
        }
      }
    }
  }
}
@media only screen and (min-height: 1350px) {
}
@media only screen and (min-height: 1440px) {
}
</style>
<style>
.pinch-zoom-container {
  height: auto !important;
}
</style>
